import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import './index.less'
import food from '../../img/food.png'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '我的订单'
  }
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  handleClick (value) {
    console.log('value',value);
    this.setState({
      current: value
    })
  }
  handleJump(){
    Taro.navigateTo({
      url:'../orderInformation/index'
    })
  }

  // componentWillMount () { }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const data = {
      tabList : [
        { 
          title: '全部订单',
          index:0,
        },{ 
          title: '待使用',
          index:1
        },{ 
          title: '已使用',
          index:2
        }
      ],
      lists:[
        {
          id:1,
          title:'美食',
          img:'http://iph.href.lu/300x200?text=占位',
          name:'九宫格老灶火锅（国购广场店）',
          state:'待消费'
        },{
          id:2,
          title:'美食',
          img:'http://iph.href.lu/300x200?text=占位',
          name:'九宫格老灶火锅（国购广场店）',
          state:'待消费'
        }
      ],
      number:2,
    }
    return (
      <View className='index'>
        <AtTabs 
          current={this.state.current} 
          tabList={data.tabList}
          onClick={this.handleClick}
        >
          {data.tabList.map(item=>(
            <AtTabsPane current={this.state.current} index={item.index} key={item.index}>
                <View>
                  {data.lists.map(list=>(
                    <View key={list.id} className='one-list-box' onClick={this.handleJump}>
                      <View className='on-list-top-box'>
                        <Image src={food} className='food' />
                        <Text className='top-box-title'>{list.title}</Text>
                      </View>
                      <View className='one-list-bottom-box'>
                        <Image src={list.img} className='good-img' />
                        <Text className='bottom-box-name'>{list.name}</Text>
                        <Text className='bottom-box-state'>{list.state}</Text>
                      </View>
                    </View>
                  ))}
                </View>
            </AtTabsPane>
          ))}
        </AtTabs>
      </View>
    )
  }
}

